<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>计算器</title>
</head>
<body>
    <div>
        <h1>简易计算器</h1>
    </div>
    <div class="content">
        <input type="button"value="CE"onclick="handleCEqualInput()"/>
        <input type="text" readonly id="txtResult" >
        <br />
        <this.value 可以代替 value 中的值填入>
        <input type="button" value="7" onclick="handleNumberInput(this.value)"/>
        <input type="button" value="8" onclick="handleNumberInput(this.value)"/>
        <input type="button" value="9" onclick="handleNumberInput(this.value)"/>
        <input type="button" value="+" onclick="handleOperateInput(this.value)"/>
            <br />
        <input type="button" value="4" onclick="handleNumberInput(4)"/>
        <input type="button" value="5" onclick="handleNumberInput(5)"/>
        <input type="button" value="6" onclick="handleNumberInput(6)"/>
        <input type="button" value="-" onclick="handleOperateInput(this.value)"/>
            <br />
        <input type="button" value="1" onclick="handleNumberInput(this.value)"/>
        <input type="button" value="2" onclick="handleNumberInput(this.value)"/>
        <input type="button" value="3" onclick="handleNumberInput(this.value)"/>
        <input type="button" value="*" onclick="handleOperateInput(this.value)"/>
            <br />
        <input type="button" value="0" onclick="handleNumberInput(this.value)"/>
        <input type="button" value="   =    "/ onclick="handleEqualInput()">
        <input type="button" value="/" onclick="handleOperateInput(this.value)"/>
            <br />
    </div>
</body>
</html>

<script>
    var num1 = ""; num2="";
    var operate = "";
    var flag = false;

    // 1. 定义处理数字按键的处理方法
    function handleNumberInput(x){
        // 将当前输入的数字, 加到顶部输入框的末尾
        var obj = document.getElementById("txtResult");
        obj.value += x;
        if (!flag)  // 按下操作符之前, 数字存入 num1 中
            num1 += x;
        else
            num2 += x;
    }

    // 2. 定义处理操作符按键的处理方法
    function handleOperateInput(ch){
        // 将当前输入的符号, 加到顶部输入框的末尾
        var obj = document.getElementById("txtResult");
        obj.value += ch;
        // 记录本次输入的符号
        operate = ch;
        // 设置操作符表示为 true
        flag = true;
        
    }

    // 3. 定义处理 = 按键的处理方法
    function handleEqualInput(){
        // 将当前输入的符号, 加到顶部输入框的末尾
        var obj = document.getElementById("txtResult");
        obj.value += "=";
        // 将 num1, num2 里面的内容, 按照 operate 表示的操作进行运算
        var result;
        if (operate == "+")
            result = parseInt(num1) + parseInt(num2)
        else if (operate == "-")
            result = parseInt(num1) - parseInt(num2)
        else if (operate == "*")
            result = parseInt(num1) * parseInt(num2)
        else if (operate == "/")
            result = parseInt(num1) / parseInt(num2)
        // 显示结果
        obj.value += result;
    }
    //定义处理CE按键的处理
    function handleCEqualInput(){
        document.getElementById("txtResult").value="";
        num1    ="";
        num2    ="";
        operate ="";
        flag    =false;//!!！
    }
</script>
